
<template>
  <div class="popupMask">
    <div class="popupPenal">
      <div class="popPenalTitle">
        <div class="popPenalTitleName">
          维护任务
        </div>
        <div class="popupClose" v-on:click="close">
          <el-button size="mini">关闭</el-button>
        </div>
      </div>
      <div class="penalContent" >
        <div>
            <div class="penalrow selectw100">
              <div class=" width100 ">
                  <div class="inlineblock verticalmiddle">
                    维护计划
                  </div>
                  <div class="inlineblock verticalmiddle informationItem">
                      <el-select v-model="xunhuanzhouqiValue" :disabled="true" clearable placeholder="请选择" size="mini">
                        <el-option
                          v-for="item in xunhuanzhouqi"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </div>
              </div>
            </div>
            <div class="penalrow selectw100">
              <div class=" width100 ">
                <div class="inlineblock verticalmiddle">
                  保养项
                </div>
                <div v-if="xunhuanzhouqiValue||flag=='look'" class="inlineblock verticalmiddle informationItem">
                    <el-table
                      :data="tableData6"
                      border
                      size='mini'
                      style="width: 100%; margin-top: 20px;">
                          <el-table-column
                            type="index"
                            width="50">
                          </el-table-column>
                          <el-table-column
                            prop="baoyangxiang"
                            min-width="100"
                            label="保养项">
                            <template slot-scope="scope">
                              <el-input size="mini" v-model="scope.row.baoyangxiang"></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="是否已维护">
                            <template slot-scope="scope">
                              <el-checkbox  :disabled="flag=='look'" v-model="scope.row.checked"></el-checkbox>
                            </template>
                          </el-table-column>
                    </el-table>
                </div>
              </div>
            </div>
        </div>
      </div>
      <div class=" penalFooter">
              <el-button v-if="flag=='new'" class="penalButton" type="primary" size="mini" v-on:click="close">确定</el-button>
              <el-button v-if="flag=='new'" class="penalButton" size="mini" v-on:click="close">取消</el-button>
              <el-button v-if="flag=='look'" class="penalButton" size="mini" v-on:click="close">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  data () {
    return {
      yesornoValue:'1',
      enableStatusValue:'1',
      options: [
                    {
                      value: '普通化学品',
                      label: '普通化学品'
                    },
                    {
                      value: '危险化学品',
                      label: '危险化学品',
                      children: [
                                  {
                                    value: 'shejiyuanze',
                                    label: '爆炸品'
                                  }, 
                                  {
                                    value: 'daohang',
                                    label: '压缩气体和液化气体'
                                  }, 
                                  {
                                    value: 'yiranyeti',
                                    label: '易燃液体'
                                  }, 
                                  {
                                    value: '易燃固体、自燃物品和遇湿易燃物品',
                                    label: '易燃固体、自燃物品和遇湿易燃物品'
                                  }, 
                                  {
                                    value: '氧化剂和有机过氧化物',
                                    label: '氧化剂和有机过氧化物'
                                  }, 
                                  {
                                    value: '有毒品',
                                    label: '有毒品'
                                  }, 
                                  {
                                    value: '放射性物品',
                                    label: '放射性物品'
                                  }, 
                                  {
                                    value: '腐蚀品',
                                    label: '腐蚀品'
                                  }
                                ]
                    },
                    {
                      value: '标准物质',
                      label: '标准物质',
                      children: [
                                  {
                                    value: '标准溶液',
                                    label: '标准溶液'
                                  }, 
                                  {
                                    value: '标准样品',
                                    label: '标准样品'
                                  }
                                ]
                    },
                    {
                      value: '实验耗材',
                      label: '实验耗材'
                    }
      ],
      selectedOptions2: [],
      tableData6: [
                    {
                      baoyangxiang:'保养项一',
                      checked:true
                    },
                    {
                      baoyangxiang:'保养项二',
                      checked:true
                    },
                    {
                      baoyangxiang:'保养项三',
                      checked:true
                    },
                    {
                      baoyangxiang:'保养项四',
                      checked:true
                    }
      ],
      multipleSelection:[],
      kaishiriqi:'',
      jieshuriqi:'',
      xunhuanzhouqi:[
                      {
                        value:'001',
                        label:'周维护（每一周一次）'
                      },
                      {
                        value:'002',
                        label:'月维护（每一月一次）'
                      },
                      {
                        value:'003',
                        label:'年维护（每12月一次）'
                      }
      ],
      xunhuanzhouqiValue:'001',
      xunhuan:'',
      cishu:'',
    }
  },
  computed:{
    // ...mapState(['']),
    biaoyangTableHeight(){
      return ((window.innerHeight - 90)*0.8 - 250)
    }
  },
  props:['flag'],
  mounted(){

  },
  methods:{
    close(){
      this.$parent.tianjiaweihujiluShow = false;
    },
    addbyx(){
      this.tableData6.push({
        baoyangxiang:''
      })
    },
    deletebyx(index){
      this.tableData6.splice(index,1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabName{
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    border: 1px solid #b7b7b7;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #a9a9a9;
}
.activeTab{
  color: #409eff;
}
.tabPageContent{

}
</style>
